﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<JQueryDemo.Models.FormTricksPost>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    FormTricks
</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>Form Tricks</h2>
<div id="tabs"> 
<ul> 
		<li><a href="#demo">Demo</a></li> 
		<li><a href="#source">Source</a></li> 
	</ul> 

    <div id="demo">
    <%:ViewData["Message"] %>
    <form id="myForm" action="FormTricks" method="post">
        <fieldset>
            <p>
            <%=Html.LabelFor(m=>m.FirstName, "First Name") %>
            <%=Html.EditorFor(m=>m.FirstName) %>
            </p>
            <p>
            <%=Html.LabelFor(m=>m.LastName, "Last Name") %>
            <%=Html.EditorFor(m=>m.LastName) %>
            </p>
            <p>
            <%=Html.LabelFor(m=>m.Email, "Email") %>
            <%=Html.EditorFor(m=>m.Email) %>
            </p>
            <p>
            <%=Html.LabelFor(m => m.Birthday, "Birthday")%>
            <%=Html.EditorFor(m => m.Birthday)%>
            </p>
            <p>
            <%=Html.LabelFor(m=>m.City, "City") %>
            <%=Html.EditorFor(m=>m.City) %>
            </p>
            <p>
            <%=Html.LabelFor(m=>m.State, "State") %>
            <%=Html.EditorFor(m=>m.State) %>
            </p>
        </fieldset>

        <button type="submit">Submit</button>
    </form>
    </div>
    <div id="source" style="height:200px;">
        <div class="accordian">
        <h3><a href="#">Date Picker</a></h3>
        <div style="height:100px;">
        <pre>
$("#Birthday").datepicker();        
        </pre>
        </div>

        <h3><a href="#">Validation Script</a></h3>
        <div style="height:100px;">
        <pre>
$("#myForm").validate({
    rules: {
        FirstName: "required",
        LastName: "required",
        Email: { "required": true, email: true },
        Birthday: "date"
    }
});
        </pre>
        </div>
        <h3><a href="#">Form Script</a></h3>
        <div style="height:100px;">
        <pre>
$('#myForm').ajaxForm({
    success: function (data) {
        alert("Hello " + data.FirstName + " " + data.LastName);
        $('#myForm').clearForm();
    }
});
        </pre>
        </div>
    </div>
    </div>
    </div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="JavascriptContent" runat="server">
<script src="<%: Url.Content("~/Scripts/jquery.form.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs();
        $(".accordian").accordion({ fillSpace: true });

        $("#Birthday").datepicker();

        $("#myForm").validate({
            rules: {
                FirstName: "required",
                LastName: "required",
                Email: { "required": true, email: true },
                Birthday: "date"
            }
        });

        $('#myForm').ajaxForm({
            success: function (data) {
                alert("Hello " + data.FirstName + " " + data.LastName);
                $('#myForm').clearForm();
            }

        });

    });
</script>
</asp:Content>
